<template>
  <el-table
      :data="report"
      style="width: 100%"
      :row-class-name="tableRowClassName"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="level" label="Level" width="180" />
    <el-table-column prop="description" label="Description" />
  </el-table>
</template>

<script lang="js">
export default {
  name: "Data",
  setup(){
    const report = [
      {
        'date': '2016-05-03',
        'level': 'high',
        'description': '疑似恐怖分子持枪闯入学校'
      },
      {
        'date': '2016-05-04',
        'level': 'middle',
        'description': 'G4电梯出现故障，有学生被困'
      },
      {
        'date': '2016-05-03',
        'level': 'low',
        'description': '食堂楼梯现在非常拥挤'
      },
      {
        'date': '2016-05-03',
        'level': 'high',
        'description': '疑似恐怖分子持枪闯入学校'
      },
      {
        'date': '2016-05-04',
        'level': 'middle',
        'description': 'G4电梯出现故障，有学生被困'
      },
      {
        'date': '2016-05-03',
        'level': 'low',
        'description': '食堂楼梯现在非常拥挤'
      },
      {
        'date': '2016-05-03',
        'level': 'high',
        'description': '疑似恐怖分子持枪闯入学校'
      },
      {
        'date': '2016-05-04',
        'level': 'middle',
        'description': 'G4电梯出现故障，有学生被困'
      },
      {
        'date': '2016-05-03',
        'level': 'low',
        'description': '食堂楼梯现在非常拥挤'
      },
      {
        'date': '2016-05-03',
        'level': 'high',
        'description': '疑似恐怖分子持枪闯入学校'
      },
      {
        'date': '2016-05-04',
        'level': 'middle',
        'description': 'G4电梯出现故障，有学生被困'
      },
      {
        'date': '2016-05-03',
        'level': 'low',
        'description': '食堂楼梯现在非常拥挤'
      },
    ];
    function tableRowClassName(row, rowIndex){
      // console.log(typeof row.rowIndex)
      // console.log(row.row.name)
      if(row.row.level==='high'){
        return 'warning-row'
      }else if(row.row.level==='middle'){
        return ''
      }
      return 'success-row'
    }
    return {
      report,
      tableRowClassName
    }
  }
}
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
